前言

前一篇使用了 List 功能，今天會把 List 及 Navigation 合在一起使用，將不同的頁面串連起來。等等的範例會透過點擊文字的方式導覽到另一頁，讓大家了解 Navigation 的使用方法。

Navigation 導覽

這邊先帶大家看一下 Navigation 使用的例子。
這是 apple 官方商店的 App，下方用 List 的方式將物品列出。

向左滑可以回到下一頁。

在導覽後的頁面，左上角有返回的按鈕。

以前可能大多使用 Navigation View ，最新的 SwiftUI 已經將 Navigation View 替代成使用 Navigation Stack 或是其他方案了，但舊的方法可以用，且使用上都大同小異，大家不用擔心。

NavigationView 官方文件點進去會看到最新版本已經改用其他方式的提示！
Navigation Stack 官方文件

Navigation View

A view for presenting a stack of views that represents a visible path in a navigation hierarchy.

這邊要注意的是它是容器，不是元件。

NavigationView {
    //...code here
    //放元件......
}

Navigation Title

要將導覽的標題打上必須加在 navigation 容器裡面，而不是它後面。
＊需放在裡面元件的後面。
如下方的 code ：

.navigationTitle()

NavigationView {
    List{
        //... list 內容
    }.navigationTitle("title")
}

可以加上以下 .inline 讓標題縮小

.navigationBarTitleDisplayMode(.inline)

Navigation Link

A view that controls a navigation presentation.
官方文件

NavigationLink(顯示的名稱){
    View()//畫面名稱
}

範例展示

常使用的範例就是以 List 來做導覽。
我這邊是用 Swift playgrounds 展示，相同的程式碼在 Xcode 上一樣可以跑。

首先可以準備幾個 view 等等會用到，然後在 List 外層增加一個 NavigationView。

我這邊寫了 2 個 View ，第一個是飛機的 Icon ，第二是一台車。
這邊也加上 .navigationTilte 將標題改成 "this is nav"

用 Navigation Link 將其導覽至各自的頁面。

用 inline 將標題縮小。

範例 code ：

struct ContentView: View {
    var body: some View {
        NavigationView{
            List{
                Section("A"){
                    NavigationLink("first"){
                        FirstView()
                    }
                    NavigationLink("second"){
                        SecondPage()
                    }
                    Text("3")
                    }
                }.navigationTitle(Text("this is nav"))
                 .navigationBarTitleDisplayMode(.inline)
        }
    }
}

今天就先這樣啦～大家可以自己試試這些功能～
下一篇見～

延伸閱讀

用 Swift playgrounds 學習